<template>
	<view class="card">
		<u-cell-group>
			<u-cell @click="click(1)" icon="weixin-fill" title="微信商家收款码" isLink></u-cell>
			<u-cell @click="click(2)" icon="zhifubao" title="支付宝个人收款码" isLink></u-cell>
			<u-cell @click="click(3)" icon="file-text" title="银行卡" isLink></u-cell>
			<u-cell @click="click(4)" icon="zhifubao" title="支付宝商家收款码" isLink></u-cell>
			<u-cell @click="click(5)" icon="file-text" title="网商银行" isLink></u-cell>
		</u-cell-group>


		<u-popup closeable round="5" :show="show" @close="close" @open="open" mode="center">
			<view class="popup flex-column justify-between p-30">
				<view class="fw-700 text-center sub-size">
					收款信息
				</view>
				<view class="mt-30">
					<template v-if="['3', '5'].includes(form.type)">
						<u-form labelWidth="150rpx" labelPosition="left" ref="uForm" errorType="toast">
							<u-form-item label="姓名" prop="name" borderBottom>
								<u-input v-model="form.name" placeholder="请输入真实姓名" border="none"></u-input>
							</u-form-item>
							<u-form-item label="银行卡号" prop="bank_account" borderBottom>
								<u-input v-model="form.bank_account" placeholder="请输入银行卡号" border="none"></u-input>
							</u-form-item>
							<u-form-item label="银行名称" prop="bank_name" borderBottom>
								<u-input v-model="form.bank_name" placeholder="请输入银行名称" border="none"></u-input>
							</u-form-item>
						</u-form>
					</template>
					<template v-else>
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="300rpx" height="300rpx"></u-upload>
					</template>
				</view>
				<view class="mt-30">
					<u-button :loading="loading" size="small" type="primary" text="确定上传" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getCard,
		submitCard
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				loading: false,
				fileList1: [],

				info: null,
				show: false,
				form: {
					type: 1,
					image: "",
					name: "",
					bank_name: "",
					bank_account: "",
				}

			}
		},
		computed: {
			...mapState([]),
		},
		onLoad() {

		},
		methods: {
			close() {
				this.fileList1 = [];
				this.info = null
				this.show = false
			},
			open() {

			},
			click(e) {
				this.form.type = String(e);
				getCard({
					data: {
						type: this.form.type
					},
					custom: {
						catch: true,
						toast: false,
					}
				}).then(res => {
					if (res) {
						this.form = res;
						console.log(res);
						if (!["3", "5"].includes(this.form.type)) {
							console.log(1);
							this.fileList1.push({
								url: res.image
							})
							console.log('fileList1,', this.fileList1);
						}
					}
					this.show = true;
				}).catch(err => {
					this.show = true;
				})
			},
			submit() {
				let vm = this;
				if (["3", "5"].includes(vm.form.type)) {
					if (vm.form.name == "") {
						vm.$u.toast('请填写姓名');
						return false;
					}
					if (vm.form.bank_account == "") {
						vm.$u.toast('请填写银行卡号');
						return false;
					}
					if (vm.form.bank_name == "") {
						vm.$u.toast('请填写银行名称');
						return false;
					}
				} else {
					if (vm.fileList1.length == 0) {
						vm.$u.toast('请上传收款码');
						return false;
					}
					vm.form.image = vm.fileList1[0].url
				}
				vm.loading = true;
				submitCard(vm.form).then(res => {
					vm.close();
					vm.$refs.uToast.show({
						type: 'success',
						message: '上传成功',
						complete() {
							vm.loading = false
							vm.close();
							uni.redirectTo({
								url: '/pages/mine/mine'
							})
						}
					})
				})

			}
		},
	}
</script>

<style lang="scss" scoped>
	.card {
		background-color: #fff;
	}

	.popup {
		width: 600rpx;
		box-sizing: border-box;
	}

	::v-deep {
		.u-upload__wrap {
			justify-content: center;
		}
	}
</style>